@charset "utf-8";
@import (reference) "base.less";  
body,html,.bg{height: 100%; .pr;}
.star{
  .dib;.vm; width: 44px; height: 42px; background: url(../images/icon/star.png) no-repeat 0 0;
  .scale(@scale:0.5);margin: 0 -5px;
}
.star.on {background-position: 0 bottom; }
.swiper-pagination-white 
.swiper-pagination-bullet-active {
    background: #22c5e5;
}
.commodity-name{
    font-size: 16px; color: #4f4f4f; font-weight: 800;.omit;
}
.blue-line {
    .pr;padding: 10px 10px 10px 20px;
    &:before{.pc; width: 3px; height: 20px; background: #30c3ea; left:10px;}
}
.swiper-pagination-bullet{width: 15px; height: 2px; border-radius: 0;}
.swiper-container {height: 270px; width:90%; margin: 0 auto; }
.swiper-container img {width: 100%; }
.guarantee img {width: 100%; }
.sale-time {
    .dis-b;.plr10;font-size: 12px; color: #adadb3;.box-align(@align:left,@vertical:center);.pr;
    text-align: right;height: 32px;
    .font-up {line-height: 45px; margin-left: 2px;}

     span{.db;}
    
    .sale {font-size: 24px; color: #eb4f40; }
    @media screen and (max-width: 330px) { 
      .sale {font-size:18px;  }
    }
        .original{
        margin-left: 5px;
        small{.db;text-decoration:line-through;}
    }
}
.time{
        width: 200px; position: absolute; right:10px;padding-top:7px;
        span {
            .dib; border: 1px solid #adadb3;color: #4f4f4f; font-size: 13px;padding: 1px 2px; 
            .roundedCorners(@radius:2px);
        }
        img{.dib; vertical-align: top; width: 17px; height: auto;}
    }
.commodity-info{
    .p10; 
    img{width: 100%;margin-bottom: -25px;}
    p{.ptb10; color: #4f4f4f; font-size: 12px;line-height: 18px;}
}
.choice-box{
    left: 0; bottom: 0; width: 100%; color: #4f4f4f;background: #fff;position: fixed;
   
    dt{font-size: 14px; line-height: 40px; margin-top: 10px;}
    dd{}
    dd span{
     display: inline-block;.vm; border: 1px solid #e1e2e3;margin-right: 10px;
     .roundedCorners(@radius:3px);font-size: 13px; padding: 5px 10px;
     margin-bottom:5px;
     }
     .gray { opacity: 0.5;}
     .on {background: #22c5e5; color: #fff; border-color: #22c5e5;}
    dl{ padding:0 5%;}
}
.sp-header {
    .dis-b;font-size: 13px;line-height: 25px; padding:0 5%;
    .price{font-size: 16px; color: #eb4f40; }
    img {width: 78px; height: 78px;display: block; border: 5px solid #fff; margin-top: -15px; }
}
dd.num-box { 
    span {margin: 0; .dib;.vm;.roundedCorners(@radius:0px);}
    input{
     width: 50px; text-align: center; border-top: 1px solid #e1e2e3;.dib;.vm;.roundedCorners(@radius:0px);
     border-bottom: 1px solid #e1e2e3;height: 25px;margin-left: -3px;margin-right: -2px;
    }
}
.order-confirm {
 width: 100%;font-size: 14px; color: #fff; height: 36px; line-height: 36px;
 background: #22c5e5;display: block; text-align: center;margin-top: 20px;
}
.buy-btn {
     height: 50px; color: #fff; position: fixed; .ac;
     left: 0; bottom: 0; line-height: 50px; width: 100%; font-size: 17px; letter-spacing: 2px;
}
.banner {width: 100%; }
.sort-nav{
    .p10; border-bottom: 1px solid #eee; 
    box-shadow: 0px 0px 1px 3px rgba(238,238,238,.5); 
    a{ 
        color: #adadb3; font-size: 12px; display: inline-block; .vm; 
        border-right: 1px solid #eee; padding:2px 4px 2px 1px;
    }
    a:last-child{ border:none;}
    a.on { color: #22c5e5; }
}
.goods-list {
    .p10;
    li{.pr; padding:10px 10px 10px 90px; font-size: 12px; color:#adadb3;height: 80px; border-bottom: 1px solid #eee; }
    li:last-child{border: none;}
    .shop-img {width: 80px; height: 80px; position: absolute; left: 0;}
    h4{ font-size: 14px; color: #4f4f4f; }
    .time {padding: 10px 0; position: inherit;}
    .red {font-size: 14px; color: #eb4f40; }
    small{ text-decoration: line-through;}
    .btn-box{.pa; right: 0;font-size: 12px; top: 50%; margin-top: -13px;text-align:right;}
    .btn-box span {
        color: #eb4f40; border: 1px solid #eb4f40;.dib;font-size: 14px; height:25px; line-height:25px;
        text-align: center; .roundedCorners(@radius:3px);margin-bottom: 3px;width: 50px;
    }
    span.gray { border: 1px solid #adadb3;  color: #adadb3;}
}
.today {
    width: 61px; height: 58px; background: url(../images/icon/jrzd.png) no-repeat 0 0; 
    background-size: 100% 100%; position: absolute;.scale(@scale:0.5);left: -10px;z-index: 1;top: -8px;
}
.approve-list {
    width: 300px; margin: 0 auto; 
    li{position: relative; padding:10px 0 0 49px; height: 39px;margin: 20px 0;font-size: 13px; }
    i{
        width:80px; height:80px; display: inline-block; vertical-align: middle;position: absolute;top: 0;top:-5px;
        background: url(../images/icon/sbicon.png) no-repeat 0 0;.scale(@scale:0.5);left: 0; margin: 0 -18px;
    }
    h3{font-size: 16px;font-weight: 500;margin-bottom: 5px;}
    li:nth-child(1){
       color: #5090f3;
        
    }
    li:nth-child(2){
        color: #81ab1a;
        i{ background-position: 0 center;}
    }
    li:nth-child(3){
        color: #ff7a26;
        i{ background-position: 0 bottom;}
    }
}
.groupon-info {
   padding: 10px;
    border-top: 2px solid #f0f0f0; 
    border-bottom: 2px solid #f0f0f0; 
    dt{ font-size: 16px; font-weight: 700; margin-bottom: 10px;}
    dd{ font-size: 14px; line-height: 20px;}
    background: url(../images/img/clock.png) no-repeat 98% 90% rgba(240, 240, 240, 0.5); 
    background-size: 15% auto;
}
.clear-btn{
    font-size: 16px; color:#3bb8d9; .db; width: 50%; .roundedCorners(@radius:25px); 
    .ac; height: 50px; line-height: 50px;margin: 20px auto;
    border: 1px solid #3bb8d9;background: none;
}
.cart-list {
    input:checked{
        background: url(../images/icon/ic_Draft-box_delete_press-min.png) no-repeat;
        background-size: 100% 100%; border: none;
    }
    .lose,input[type=checkbox] {.pa;top:50%; }
    .lose {
        background:#adadb3; color: #fff; height: 15px; line-height: 15px;margin-top: -8px;
        padding:2px 4px; .roundedCorners(@radius:3px); left:5px; 
    }
    input[type=checkbox] {
        width: 18px; height: 18px; .roundedCorners(@radius:9px); 
        border: 1px solid #e1e2e3; left:10px; 
        margin-top: -9px;
    }
    img { width: 80px; height: 80px;.pa;left:40px; }
    li{ 
        padding: 10px 10px 10px 130px; .pr; height: 80px; 
        background: #fff; margin-bottom: 8px;
    }
    dl { font-size: 13px; }
    dt { .pr;.omit; padding-right: 50px;padding-bottom:10px; }
    dd { .pr; line-height: 19px; }
    a,.num,.repertory {.pa; right:0px; }
    a {border-left: 1px solid #adadb3; padding-left:10px;}
    .num{ color: #4f4f4f; }
    .edit {
        dt{
            height:50px; line-height: 25px; 
            span,input[type=text]{ border: 1px solid #e1e2e3; .dib;.ac; height:25px;.f14; }
            span { width: 25px;}
            p{width: 50px; margin-left: 25px;.ac; font-size: 12px; color: #adadb3;}
            input[type=text] {width: 50px; margin: 0 -5px;}
        }
        .over,.delete { height: 100%; color: #fff;line-height:100px; top: 0; padding: 0 8px; border: none;}
        .over {background: #eb4f40; right: 0;}
        .delete {background: #e1e2e3; right: 40px; }

    }
   
}

.bottom-box{
    input:checked{
        background: url(../images/icon/ic_Draft-box_delete_press-min.png) no-repeat;
        background-size: 100% 100%; border: none;
    }
    position: fixed; width: 100%; bottom: 0;.dwb; height: 50px;line-height: 50px;
    background: #fff;
    font-size: 14px;
    span,input,button{.db;.ac;height: 50px;}
    .all-box {margin: 0 5px}
    .all-choice{.flex(@part:1); }
    .total-span{.flex(@part:2); }
    .total-btn{.flex(@part:2);.bg_red;color: #fff;  font-size: 14px;}
    input[type=checkbox]{
        width: 18px; height: 18px; .roundedCorners(@radius:9px); 
        border: 1px solid #e1e2e3; left:10px; 
    }

    .icon-cart {
        width: 50px; height: 50px; 
        background: url(../images/icon/cart.png) no-repeat center 5px;
        background-size: 45% auto;font-size: 10px;line-height: 78px;
    }
    .add-cart {.flex(@part:1);background: #22c5e5; font-size: 17px; color: #fff; }
    .buy-now {.flex(@part:1);background: #ec4f40;font-size: 17px; color: #fff; }
}
.empty-cart {
    background: url(../images/icon/cart.png) no-repeat center 15px;
    background-size: auto 50%;
    padding-top: 38%; .ac;
}

// 购物车商品列表
.goods-size {
    table{text-align: center;margin: 0 auto;background: #fafafa; font-size: 13px; width: 80%;
    border-top:2px solid #fff;}
    tr{ height: 30px; line-height: 30px}
    tr:nth-child(2n){background: #fff;}
    td{width: 33%}

}
.flow-detail{
    font-size: 12px;
    dt{font-weight: bold; }
    dd{padding:0 10px; line-height: 20px}
}
.size-tab{
    a{
        .dib;.vm; margin-right:5px;.ac; height: 30px; line-height: 30px;font-size: 13px;
        color: #adadb3;background: #e1e2e3;padding:0 5px;
    }
    .on { color: #fff;background: #3bb7d9;}
}
.approve-list-haitao {
    width: 300px; margin: 0 auto; color: #ff7a26;
    li{position: relative; padding:10px 0 0 49px; height: 39px;margin: 20px 0;font-size: 13px; }
    i{
        width:80px; height:80px; display: inline-block; vertical-align: middle;position: absolute;top: 0;top:-5px;
        background: url(../images/icon/sbicon1.png) no-repeat 0 0;.scale(@scale:0.5);left: 0; margin: 0 -18px;
    }
    h3{font-size: 16px;font-weight:700;margin-bottom: 5px;}
    li:nth-child(1){
       color: #d4237a;
    }
    li:nth-child(2){
        color: #81ab1a;
        i{ background-position: 0 -147px;}
    }
    li:nth-child(3){
        color: #5090f3;
        i{ background-position: 0 -296px;}
    }
    li:nth-child(4){
        i{ background-position: 0 bottom;}
    }
}
.card-id{
    background: #f5f7fa; font-size: 11px; color: #ec4f40;
    input {
     width:90%; padding: 10px 5%;background:#fff; margin:10px 0; font-weight: 700;
     font-size: 18px; height: 50px; line-height: 50px; color: #4f4f4f;outline: none;
    }
    button {
        width: 90%; margin:20px 5%; text-align: center; color: #fff;background: #22c5e5;  
        height: 40px; line-height: 40px; font-size: 16px;.roundedCorners(@radius:5px);
    }
}